<template>
	<view class="searchBox">
		<view class="searchTitle">
			<text class="searchTitleText">{{title}}</text>
			<u-icon name="trash" color="#000" size="24" v-if="title=='历史记录'?true:false" @click="clearHistory"></u-icon>
		</view>
		<view class="searchInner">
			<text v-for="(item,index) in list" :key="index" :class="item.is_hot==1?'active':'text'"
				@click="GetKeywordDoods(item.keyword)">{{item.keyword}}</text>
		</view>
	</view>
</template>

<script>
	import {
		searchIndexApi,
		ClearHistory,
		searchHelper,
		goodsListApi
	} from "@/pages/request/api.js"
	import request from "../../pages/request/request.js"
	export default {

		props: {
			title: {
				type: String,
				default: ""
			},
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {

			}
		},
		methods: {
			clearHistory() {
				request({
					url: ClearHistory
				})
				uni.navigateTo({
					url: "../popup/popup"
				})
			},
			GetKeywordDoods(keyword) {
				this.$emit('GetKeywordDoods', keyword)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchTitle {
		display: flex;
		justify-content: space-between;
	}

	.searchTitleText {
		font-size: 36rpx;
	}

	.searchBox {
		background-color: #fff;
		// padding: 20rpx;
	}

	.searchInner {
		padding: 10rpx 0;
		display: flex;
		flex-wrap: wrap;
	}

	.searchInner {
		.text {
			font-size: 24rpx;
			color: #969799;
			border: 2rpx solid #969799;
			margin: 0 20rpx 20rpx 0;
			padding: 4rpx 8rpx;
		}

		.active {
			font-size: 24rpx;
			margin: 0 20rpx 20rpx 0;
			padding: 4rpx 8rpx;
			color: red;
			border: 2rpx solid red;
		}
	}
</style>
